<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>教师列表</title>
	<link rel="stylesheet" type="text/css" href="/easyui/themes/black/easyui.css">
	<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="/easyui/css/demo.css">
	<script type="text/javascript" src="/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/easyui/js/validateExtends.js"></script>
</head>
<body>
<!-- 数据列表 -->
<table id="dataList" cellspacing="0" cellpadding="0">

</table>
<!-- 工具栏 -->
<div id="toolbar">
		<c:if test="${usertype == '3'}">
			<div style="float: left;"><a id="add" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a></div>
			<div style="float: left;" class="datagrid-btn-separator"></div>
		</c:if>
	<div style="float: left;"><a id="edit" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a></div>
	<div style="float: left;" class="datagrid-btn-separator"></div>
	<c:if test="${usertype == '3'}">
		<div style="float: left;"><a id="delete" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-some-delete',plain:true">删除</a></div>
	</c:if>
	<div style="float: left;margin-top:4px;" class="datagrid-btn-separator" >&nbsp;&nbsp;姓名：<input id="search_student_name" class="easyui-textbox" name="search_student_name" /></div>
	<div style="margin-left: 10px;margin-top:4px;" >班级：<input id="clazzList" class="easyui-textbox" name="clazz" />
		<a id="search-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">搜索</a>
	</div>
</div>

<!-- 添加窗口 -->
<div id="addDialog" style="padding: 10px;">
<!--	<div style=" position: absolute; margin-left: 560px; width: 200px; border: 1px solid #EEF4FF" id="photo">-->
<!--		<img alt="照片" style="max-width: 200px; max-height: 400px;" title="照片" src="PhotoServlet?method=getPhoto" />-->
<!--	</div>-->
	<form id="addForm" method="post" enctype="multipart/form-data">
		<table id="addTable" border=0 style="width:800px; table-layout:fixed;" cellpadding="6" >
			<tr>
				<td style="width:40px">班级:</td>
				<td colspan="3">
					<input id="add_clazzList" style="width: 200px; height: 30px;" class="easyui-textbox" name="clazzId" />
				</td>
				<td style="width:80px"></td>
			</tr>
			<tr>
				<td>姓名:</td>
				<td colspan="4"><input id="add_name" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="username" data-options="required:true, missingMessage:'请填写姓名'" /></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td colspan="4"><input id="add_password" style="width: 200px; height: 30px;" class="easyui-textbox" type="password" name="password" data-options="required:true, missingMessage:'请填写密码'" /></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td colspan="4"><select id="add_sex" class="easyui-combobox" data-options="editable: false, panelHeight: 50, width: 60, height: 30" name="sex"><option value="男">男</option><option value="女">女</option></select></td>
			</tr>
			<tr>
				<td>电话:</td>
				<td colspan="4"><input id="add_phone" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="mobile" validType="mobile" /></td>
			</tr>
			<tr>
				<td>QQ:</td>
				<td colspan="4"><input id="add_qq" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="qq" validType="number" /></td>
			</tr>
			<tr>
				<td>相片:</td>
				<td><input onchange="filechange(event)" type="file" name="file" multiple></td>
				<td><div id="imgDiv"></div></td>
			</tr>
		</table>
	</form>
</div>


<!-- 修改窗口 -->
<div id="editDialog" style="padding: 10px">
<!--	<div style=" position: absolute; margin-left: 560px; width: 200px; border: 1px solid #EEF4FF">-->
<!--		<img id="edit_photo" alt="照片" style="max-width: 200px; max-height: 400px;" title="照片" src="" />-->
<!--		<form id="uploadForm" method="post" enctype="multipart/form-data" action="PhotoServlet?method=SetPhoto" target="photo_target">-->
<!--			&lt;!&ndash; StudentServlet?method=SetPhoto &ndash;&gt;-->
<!--			<input type="hidden" name="tid" id="set-photo-id">-->
<!--			<input class="easyui-filebox" name="photo" data-options="prompt:'选择照片'" style="width:200px;">-->
<!--			<input id="upload-photo-btn" onClick="uploadPhoto()" class="easyui-linkbutton" style="width: 50px; height: 24px;" type="button" value="上传"/>-->
<!--		</form>-->
<!--	</div>-->
	<form id="editForm" method="post" enctype="multipart/form-data">
		<table id="editTable" border=0 style="width:800px; table-layout:fixed;" cellpadding="6" >
			<tr>
				<td style="width:40px">班级:</td>
				<td colspan="3">
					<input id="edit_clazzList" style="width: 200px; height: 30px;" class="easyui-textbox" name="clazzId" />
				</td>
				<td style="width:80px"></td>
			</tr>
			<tr>
				<td>姓名:</td>
				<td><input id="edit_name" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="username" data-options="required:true, missingMessage:'请填写姓名'" /></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td><select id="edit_sex" class="easyui-combobox" data-options="editable: false, panelHeight: 50, width: 60, height: 30" name="sex"><option value="男">男</option><option value="女">女</option></select></td>
			</tr>
			<tr>
				<td>电话:</td>
				<td><input id="edit_phone" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="mobile" validType="mobile" /></td>
			</tr>
			<tr>
				<td>QQ:</td>
				<td colspan="4"><input id="edit_qq" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="qq" validType="number" /></td>
			</tr>
			<tr>
				<td>相片:</td>
				<td><input onchange="filechange1(event)" type="file" name="file" multiple></td>
				<td><div id="imgd"></div></td>
			</tr>
		</table>
	</form>
</div>

<iframe id="photo_target" name="photo_target"></iframe>
<script type="text/javascript">
	$('#dataList').datagrid({
		title:'教师列表',
		iconCls:'icon-more',//图标
		border: true,
		collapsible:false,//是否可折叠的
		fit: false,//自动大小
		method: "post",
		url: "/teacher/list",  //[[@{/teacher/getTeacherList}]]
		idField:'id',
		singleSelect:false,//是否单选
		pagination:true,//分页控件
		rownumbers:true,//行号
		sortName:'id',
		sortOrder:'DESC',
		remoteSort: false,
		columns: [
			[
				{field:'chk',checkbox: true,width:50},
				{field:'id',title:'ID',width:50, sortable: true},
				{field:'sn',title:'工号',width:150, sortable: true},
				{field:'username',title:'姓名',width:150},
				{field:'sex',title:'性别',width:100},
				{field:'mobile',title:'电话',width:150},
				{field:'qq',title:'QQ',width:150},
				{field:'clazzId',title:'班级',width:150,
					formatter: function(value,row,index){
						if (row.clazzId){
							var clazzList = $("#clazzList").combobox("getData");
							for(var i=0;i<clazzList.length;i++ ){
								//console.log(clazzList[i]);
								if(row.clazzId == clazzList[i].id)return clazzList[i].name;
							}
							return row.clazzId;
						} else {
							return 'not found';
						}
					}
				}
			]
		],
		toolbar: "#toolbar",
		onBeforeLoad : function(){
			try{
				$("#clazzList").combobox("getData")
			}catch(err){
				preLoadClazz();
			}
		}
	});
	//设置工具类按钮
	$("#add").click(function(){
		$("#addDialog").dialog("open");
	});
	//修改
	$("#edit").click(function(){
		var selectRows = $("#dataList").datagrid("getSelections");
		if(selectRows.length != 1){
			$.messager.alert("消息提醒", "请选择一条数据进行操作!", "warning");
		} else{
			$("#editDialog").dialog("open");
		}
	});
	//删除
	$("#delete").click(function(){
		var selectRows = $("#dataList").datagrid("getSelections");
		var selectLength = selectRows.length;
		if(selectLength == 0){
			$.messager.alert("消息提醒", "请选择数据进行删除!", "warning");
		} else{
			var jsonObj = {};
			$.each(selectRows,function(i,n){
				jsonObj["ids["+i+"]"] = n.id;
			});
			$.messager.confirm("消息提醒", "将删除与教师相关的所有数据，确认继续？", function(r){
				if(r){
					$.ajax({
						type: "post",
						url: "/teacher/delete",  //[[@{/teacher/deleteTeacher}]]
						data: jsonObj,
						success: function(data){
							if(data.success){
								$.messager.alert("消息提醒",data.message,"info");
								//刷新表格
								$("#dataList").datagrid("reload");
								$("#dataList").datagrid("uncheckAll");
							} else{
								$.messager.alert("消息提醒",data.message,"warning");
								return;
							}
						}
					});
				}
			});
		}
	});

	function preLoadClazz(){
		$("#clazzList").combobox({
			width: "150",
			height: "25",
			valueField: "id",
			textField: "name",
			multiple: false, //可多选
			editable: false, //不可编辑
			method: "post",
			url: "/clazz/comboboxList",   //[[@{/clazz/getClazzList(from=combox)}]]
			onChange: function(newValue, oldValue){
				//加载班级下的学生
				//$('#dataList').datagrid("options").queryParams = {clazzid: newValue};
				//$('#dataList').datagrid("reload");
			}
		});
	}

	//设置添加窗口
	$("#addDialog").dialog({
		title: "添加教师",
		width: 850,
		height: 550,
		iconCls: "icon-add",
		modal: true,
		collapsible: false,
		minimizable: false,
		maximizable: false,
		draggable: true,
		closed: true,
		buttons: [
			{
				text:'添加',
				plain: true,
				iconCls:'icon-user_add',
				handler:function(){
					var validate = $("#addForm").form("validate");
					if(!validate){
						$.messager.alert("消息提醒","请检查你输入的数据!","warning");
						return;
					} else{
						var clazzid = $("#add_clazzList").combobox("getValue");
						var formData = new FormData($( "#addForm" )[0]);

						$.ajax({
							type: "post",
							url: "/teacher/add",  //[[@{/teacher/addTeacher}]]
							data: formData,
							async: false,
							cache: false,
							contentType: false,
							processData: false,
							success: function(data){
								if(data.success){
									$.messager.alert("消息提醒",data.message,"info");
									//关闭窗口
									$("#addDialog").dialog("close");
									//清空原表格数据
									$("#add_number").textbox('setValue', "");
									$("#add_name").textbox('setValue', "");
									$("#add_sex").textbox('setValue', "男");
									$("#add_phone").textbox('setValue', "");
									$("#add_qq").textbox('setValue', "");
									$(table).find(".chooseTr").remove();

									//重新刷新页面数据
									$('#dataList').datagrid("reload");

								} else{
									$.messager.alert("消息提醒",data.message,"warning");
									return;
								}
							}
						});
					}
				}
			},
			{
				text:'重置',
				plain: true,
				iconCls:'icon-reload',
				handler:function(){
					$("#add_number").textbox('setValue', "");
					$("#add_name").textbox('setValue', "");
					$("#add_phone").textbox('setValue', "");
					$("#add_qq").textbox('setValue', "");

					$(table).find(".chooseTr").remove();

				}
			},
		],
		onClose: function(){
			$("#add_number").textbox('setValue', "");
			$("#add_name").textbox('setValue', "");
			$("#add_phone").textbox('setValue', "");
			$("#add_qq").textbox('setValue', "");

			$(table).find(".chooseTr").remove();
		}
	});



	//下拉框通用属性
	$("#edit_clazzList, #add_clazzList").combobox({
		width: "200",
		height: "30",
		valueField: "id",
		textField: "name",
		multiple: false, //不可多选
		editable: false, //不可编辑
		method: "post",
	});



	$("#add_clazzList").combobox({
		url: "/clazz/comboboxList",   //[[@{/clazz/getClazzList(from=combox)}]]
		onLoadSuccess: function(){
			//默认选择第一条数据
			var data = $(this).combobox("getData");
			$(this).combobox("setValue", data[0].id);
			$(this).combobox("setText", data[0].name);
		}
	});

	//编辑教师信息班级下拉框
	$("#edit_clazzList").combobox({
		url: "/clazz/comboboxList",  //[[@{/clazz/getClazzList(from=combox)}]]
		onLoadSuccess: function(){
			//默认选择第一条数据
			var data = $(this).combobox("getData");
			$(this).combobox("setValue", data[0].id);
			$(this).combobox("setText", data[0].name);
		}
	});


	//编辑教师信息
	$("#editDialog").dialog({
		title: "修改教师信息",
		width: 850,
		height: 550,
		iconCls: "icon-edit",
		modal: true,
		collapsible: false,
		minimizable: false,
		maximizable: false,
		draggable: true,
		closed: true,
		buttons: [
			{
				text:'提交',
				plain: true,
				iconCls:'icon-user_add',
				handler:function(){
					var validate = $("#editForm").form("validate");
					if(!validate){
						$.messager.alert("消息提醒","请检查你输入的数据!","warning");
						return;
					} else{
						// var clazzid = $("#edit_clazzList").combobox("getValue");
						var id = $("#dataList").datagrid("getSelected").id;
						// var name = $("#edit_name").textbox("getText");
						// var sex = $("#edit_sex").textbox("getText");
						// var phone = $("#edit_phone").textbox("getText");
						// var qq = $("#edit_qq").textbox("getText");
						// var data = {id:id, clazzid:clazzid, name:name,sex:sex,mobile:phone,qq:qq};

						var formData = new FormData($( "#editForm" )[0]);
						formData.append("id",id);
						$.ajax({
							type: "post",
							url: "/teacher/update",   //[[@{/teacher/editTeacher}]]
							data: formData,
							async: false,
							cache: false,
							contentType: false,
							processData: false,
							success: function(data){
								if(data.success){
									$.messager.alert("消息提醒",data.message,"info");
									//关闭窗口
									$("#editDialog").dialog("close");
									//清空原表格数据
									$("#edit_name").textbox('setValue', "");
									$("#edit_sex").textbox('setValue', "男");
									$("#edit_phone").textbox('setValue', "");
									$("#edit_qq").textbox('setValue', "");

									//重新刷新页面数据
									$('#dataList').datagrid("reload");
									$('#dataList').datagrid("uncheckAll");

								} else{
									$.messager.alert("消息提醒",data.message,"warning");
									return;
								}
							}
						});
					}
				}
			},
			{
				text:'重置',
				plain: true,
				iconCls:'icon-reload',
				handler:function(){
					$("#edit_name").textbox('setValue', "");
					$("#edit_phone").textbox('setValue', "");
					$("#edit_qq").textbox('setValue', "");

					$(table).find(".chooseTr").remove();

				}
			},
		],
		onBeforeOpen: function(){
			var selectRow = $("#dataList").datagrid("getSelected");
			console.log(selectRow);
			$("#imgd div").remove();
			$.ajax({
				type: "post",
				url: "/system/photo" +"?teacherId="+selectRow.id, //[[@{/system/getPhoto}]]
				success: function(data){
					var i = "/upload/images";   //[[@{/upload/imgs/}]]
					var imgUrl = data.imgurl;
					var img = i + imgUrl;
					//设置值
					$("#edit_name").textbox('setValue', selectRow.username);
					$("#edit_sex").textbox('setValue', selectRow.sex);
					$("#edit_phone").textbox('setValue', selectRow.mobile);
					$("#edit_qq").textbox('setValue', selectRow.qq);

					var div = document.createElement("div"),
							img1 = document.createElement("img");
					//div.className = "pic";
					img1.src=img;
					$(img1).css("width","200px");
					$(img1).css("hight","200px");
					div.appendChild(img1);
					$("#imgd").append(div);

					//$("#edit_photo").attr("src", img);
					// $(".imgDiv").

					$("#edit-id").val(selectRow.id);
					$("#set-photo-id").val(selectRow.id);
					var clazzid = selectRow.clazzId;
					setTimeout(function(){
						$("#edit_clazzList").combobox('setValue', clazzid);
					}, 100);
				}
			});

		},
		onClose: function(){
			$("#edit_name").textbox('setValue', "");
			$("#edit_phone").textbox('setValue', "");
			$("#edit_qq").textbox('setValue', "");
		}
	});

	//搜索按钮监听事件
	$("#search-btn").click(function(){
		$('#dataList').datagrid('load',{
			teacherName: $('#search_student_name').val(),
			clazzId: $("#clazzList").combobox('getValue') == '' ? 0 : $("#clazzList").combobox('getValue')
		});
	});

	//上传图片按钮事件
	$("#upload-photo-btn").click(function(){

	});
	function uploadPhoto(){
		var action = $("#uploadForm").attr('action');
		var pos = action.indexOf('tid');
		if(pos != -1){
			action = action.substring(0,pos-1);
		}
		$("#uploadForm").attr('action',action+'&tid='+$("#set-photo-id").val());
		$("#uploadForm").submit();
		setTimeout(function(){
			var message =  $(window.frames["photo_target"].document).find("#message").text();
			$.messager.alert("消息提醒",message,"info");

			$("#edit_photo").attr("src", "PhotoServlet?method=getPhoto&tid="+$("#set-photo-id").val());
		}, 1500)
	}

	/*图片预览*/
	var filechange=function(event){
		$("#imgDiv div").remove();

		var inp = event.path[0];
		var files = event.target.files;
		$.each(files,function(key,value){
			//每次都只会遍历一个图片数据
			var div = document.createElement("div"),
					img = document.createElement("img");
			div.className = "pic";

			var fr = new FileReader();
			fr.onload = function(){
				img.src=this.result;
				$(img).css("width","200px");
				$(img).css("hight","200px");
				div.appendChild(img);
				$("#imgDiv").append(div);
			};
			console.log(img)
			fr.readAsDataURL(value);
		})
	};

	var filechange1=function(event) {
		$("#imgd div").remove();

		var inp = event.path[0];
		var files = event.target.files;
		$.each(files, function (key, value) {
			//每次都只会遍历一个图片数据
			var div = document.createElement("div"),
					img = document.createElement("img");
			div.className = "pic";

			var fr = new FileReader();
			fr.onload = function () {
				img.src = this.result;
				$(img).css("width", "200px");
				$(img).css("hight", "200px");
				div.appendChild(img);
				$("#imgd").append(div);
			};
			console.log(img)
			fr.readAsDataURL(value);
		})
	};
</script>
</body>
</html>